<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Modal from '@sscd/modal';
  const modal1Visible = ref<boolean>(false);
  const modal2Visible = ref<boolean>(false);
  const setModal1Visible = (visible: boolean) => {
    modal1Visible.value = visible;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">自定义位置</div>
    <div class="demo-content">
      <Button type="primary" @click="setModal1Visible(true)">
        Display a modal dialog at 20px to Top
      </Button>
      <Modal
        v-model:visible="modal1Visible"
        title="20px to Top"
        style="top: 20px"
        @ok="setModal1Visible(false)"
      >
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
      </Modal>
      <br />
      <br />
      <Button type="primary" @click="modal2Visible = true"> Vertically centered modal dialog </Button>
      <Modal
        v-model:visible="modal2Visible"
        title="Vertically centered modal dialog"
        centered
        @ok="modal2Visible = false"
      >
        <p>some contents...</p>
        <p>some contents...</p>
        <p>some contents...</p>
      </Modal>
    </div>
  </div>
</template>
